<template>
    <div class="user-manager">
        <div class="query-form">    
            <!-- 查询区域 -->
            <el-form ref="form" :inline="true" :model="queryForm">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="queryForm.menuName" placeholder="请输入菜单名称"/>
                </el-form-item>
                <el-form-item label="菜单状态" prop="menuState">
                    <el-select v-model="queryForm.menuState" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="所有" />
                        <el-option :value="1"  label="正常" />
                        <el-option :value="2"  label="停用" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <!-- 列表区域 -->
            <div class="action">
                <el-button type="primary" @click="handleAdd(1)" v-has="'menu-create'">新增</el-button>
            </div>
            <el-table 
                :data="menuList"
                row-key="_id"
                :tree-props="{ children: 'children' }"
                >
                <el-table-column
                    v-for="item in columns"
                    :key="item.prop"
                    :prop="item.prop" 
                    :label="item.label" 
                    :width="item.width"
                    :formatter="item.formatter"
                >
                </el-table-column>
                <el-table-column label="操作" min-width="150">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleAdd(2, scope.row)" v-has="'menu-create'"
                            >新增</el-button
                        >
                        <el-button size="small" @click="handleEdit(scope.row)" v-has="'menu-edit'"
                            >编辑</el-button
                        >
                        <el-button type="danger" size="small" @click="handleDel(scope.row._id)" v-has="'menu-delete'"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="action=='add'?'菜单创建':'菜单编辑'" v-model="showModel" width="40%" class="user-dialog" @close="handleClose">
            <el-form ref="dialogForm" :model="menuForm" label-width="80px" class="compact-form" :rules="rules">
                <el-form-item label="父级菜单" prop="parentId">
                    <el-cascader 
                        v-model="menuForm.parentId"
                        :options="menuList" 
                        :props="{ checkStrictly: true, value:'_id', label:'menuName' }" 
                        placeholder="请选择父级菜单"
                        clearable 
                    />
                    <span style="margin-left: 30px;">不选，则直接创建一级菜单</span>
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <el-radio-group v-model="menuForm.menuType">
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称"/>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon" v-show="menuForm.menuType == 1">
                    <el-input v-model="menuForm.icon" placeholder="请输入菜单图标"/>
                </el-form-item>
                <el-form-item label="路由地址" prop="path" v-show="menuForm.menuType == 1">
                    <el-input v-model="menuForm.path" placeholder="请输入路由地址"/>
                </el-form-item>
                <el-form-item label="权限标识" prop="menuCode" v-show="menuForm.menuType == 2">
                    <el-input v-model="menuForm.menuCode" placeholder="请输入权限标识"/>
                </el-form-item>
                <el-form-item label="组件路径" prop="component" v-show="menuForm.menuType == 1">
                    <el-input v-model="menuForm.component" placeholder="请输入组件路径"/>
                </el-form-item>
                <el-form-item label="菜单状态" prop="menuState">
                    <el-radio-group v-model="menuForm.menuState">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="handleClose">取消</el-button>
                        <el-button type="primary" @click="handleSubmit">确定</el-button>
                    </div>
                </template>
        </el-dialog>

    </div>
</template>
  
<script>
import utils from '@/utils/utils.js'
export default {
    name: 'Menu',
    data() {
        return {
            queryForm: {
                menuState: 1,

            },
            menuList: [],
            columns: [
                {
                    label: '菜单名称',
                    prop: 'menuName',
                    width: 180,
                },
                {
                    label: '图标',
                    prop: 'icon',
                },
                {
                    label: '菜单类型',
                    prop: 'menuType',
                    formatter(row, column, value) {
                        return {
                            '1': '菜单',
                            '2': '按钮',
                        }[value];

                    }

                },
                {
                    label: '权限标识',
                    prop: 'menuCode',
                },
                {
                    label: '路由地址',
                    prop: 'path',
                },
                {
                    label: '组件路径',
                    prop: 'component',
                },
                {
                    label: '菜单状态',
                    prop: 'menuState',
                    formatter(row, column, value) {
                        return {
                            '1': '正常',
                            '2': '停用',
                        }[value];

                    }
                },
                {
                    label: '创建时间',
                    prop: 'createTime',
                    width: 170,
                    formatter(row, column, value) {
                        return utils.formateDate(new Date(value));

                    }
                },
                
            ],
            showModel: false,
            menuForm: {
                parentId: [null],
                menuType: 1,
                menuState: 1,
            },
            action: "",
            rules: {
                menuName: [
                    {
                        required: true,
                        message: '请输入菜单名称',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 10,
                        message: '长度在 2 到 10 个字符', 
                        trigger: 'blur'
                    },
                ]
            }
                
            
        };
    },
    mounted() {
        this.getMenuList();
    },
    methods: {
        // 菜单列表初始化
        async getMenuList() {
            try {
                let list = await this.$api.getMenuList(this.queryForm);
                this.menuList = list;
            } catch (error) {
                throw new Error(error);
            }

        },
        // 表单查询
        handleQuery() {
            this.getMenuList();
        },
        // 表单重置
        handleReset(form) {
            this.$refs[form].resetFields()
        },
        // 新增菜单
        handleAdd(type, row) {
            this.showModel = true;
            this.action = 'add';
            // 当在某个菜单下新增子菜单时，父级菜单的 id 需要传入
            if (type == 2) {
                this.menuForm.parentId = [...row.parentId, row._id].filter(item => item);
            }
        },
        // 编辑菜单
        handleEdit(row) {
            this.showModel = true;
            this.action = 'edit';
            // 数据加载非常快，在弹框加载好时就有数据了，这样会导致将弹框设置成初始值时已经包含了数据
            // 这里使用 $nextTick 来确保弹框加载完成后再设置数据
            this.$nextTick(() => {
                Object.assign(this.menuForm, row)
            })
        },
        // 删除菜单
        async handleDel(_id) {
            await this.$api.menuSubmit({ _id, action: 'delete' });
            this.$message.success('删除成功');
            this.getMenuList();
        },
        // 菜单操作提交       
        handleSubmit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    let { action, menuForm } = this;
                    let params = { ...menuForm, action }
                    let res = await this.$api.menuSubmit(params);
                    this.showModel = false;
                    this.$message.success('操作成功');
                    this.handleReset('dialogForm');
                    this.getMenuList();
                }
            })
        },
        // 弹框关闭 
        handleClose() {
            this.showModel = false;
            this.handleReset('dialogForm');
        }
    }
}
</script>
  
<style lang="scss">
</style>
  